<template>
    <div class="role-box">
        <div class="search-role-box">
            <div class="search-input"><el-input class="inp" v-model="input" placeholder="请输入角色名称" /></div>
            <button>搜索</button>
            <button>重置</button>
        </div>
        <div class="add-btn"><button @click="dialogVisible = true">新增用户</button></div>
        <div class="table-box">
            <el-table :data="newLIST" border style="width: 100%">
                <el-table-column prop="user" label="用户名" width="230">
                    <!-- <template #default="scoped">
                        {{ ruleForm2.user = scoped.row.user  }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="roleName" label="昵称" width="250" >
                    <!-- <template #default="scoped">
                        {{  ruleForm2.roleName = scoped.row.roleName }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="number" label="手机号" width="180" style="height:70px" >
                    <!-- <template #default="scoped">
                        {{  ruleForm2.number = scoped.row.number }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="role" label="角色" width="120" >
                    <!-- <template #default="scoped">
                        {{  ruleForm2.role = scoped.row.role }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="state" label="状态" width="120" >
                    
                </el-table-column>
                <el-table-column label="操作" width="350">
                    <template #default="scoped">
                        <button class="open">启用</button>
                    <button class="del-btn" @click="del(scoped.row.key)">删除</button>
                    <button class="chg-btn" @click="ins(scoped.row)">编辑</button>
                    <button class="reset">重置密码</button>
                    </template>
                  
                </el-table-column>
            </el-table>
        </div>


    </div>

    <!-- 模态框 -->
    <el-dialog v-model="dialogVisible" title="新增用户" width="30%" :before-close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="用户名" prop="user">
                <el-input v-model="ruleForm.user" />
            </el-form-item>
            <el-form-item label="昵称" prop="roleName">
                <el-input v-model="ruleForm.roleName" />
            </el-form-item>
            <el-form-item label="手机号" prop="number">
                <el-input v-model="ruleForm.number" />
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-select v-model="ruleForm.role" placeholder="请选择角色">
                    <el-option label="老师" value="老师" />
                    <el-option label="学生" value="学生" />
                </el-select>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="surebtn">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog v-model="dialogVisible2" title="编辑用户" width="30%" :before-close="handleClose2">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules2" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="用户名" prop="user">
                <el-input v-model="ruleForm2.user" />
            </el-form-item>
            <el-form-item label="昵称" prop="roleName">
                <el-input v-model="ruleForm2.roleName" />
            </el-form-item>
            <el-form-item label="手机号" prop="number">
                <el-input v-model="ruleForm2.number" />
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-select v-model="ruleForm2.role" placeholder="请选择角色">
                    <el-option label="老师" value="老师" />
                    <el-option label="学生" value="学生" />
                </el-select>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="surebtn2">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref ,onMounted} from 'vue'
import { ElMessageBox, FormInstance, FormRules } from 'element-plus'

const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const treeRef: Ref = ref(null)
const input = ref()
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    user: '',
    roleName: '',
    number: '',
    role: '',
})

// 编辑
const ruleForm2 = reactive({
    user: '',
    roleName: '',
    number: '',
    role: '',
})


const surebtn = ()=>{
    dialogVisible.value = false
    console.log(ruleForm);
    
}
const ins =(val:any)=>{
    if(val){
        dialogVisible2.value = true
        // console.log(val);
        ruleForm2.user=val.user
        ruleForm2.roleName=val.roleName
        ruleForm2.role = val.role
        ruleForm2.number=val.number
    }
}
const surebtn2 = ()=>{
    dialogVisible2.value = false
    console.log(ruleForm2);
    
}
const rules = reactive<FormRules>({
    user: [
        {  required: true, trigger: 'blur' },
        { min: 1, max: 5, trigger: 'blur' },
    ],
    roleName: [
        { required: true, trigger: 'blur' },
        { min: 1, max: 5,  trigger: 'blur' },
    ],
    number: [
        { required: true,   },
        { max: 11, trigger: 'blur' },
    ],
    role: [
        {
            required: true,
            trigger: 'change',
        },
    ],
})

const rules2 = reactive<FormRules>({
    user: [
        {  required: false, trigger: 'blur' },
        { min: 1, max: 5, trigger: 'blur' },
    ],
    roleName: [
        { required: false, },
        { min: 1, max: 5,  trigger: 'blur' },
    ],
    number: [
        { required: false,   },
        { max: 11, trigger: 'blur' },
    ],
    role: [
        {
            required: false,
            trigger: 'change',
        },
    ],
})



interface DataType {
    key: number;
    user: string;
    roleName: string;//角色名称 
    number?: string;//角色描述
    role: string;//角色创建日期 
    state: string;//角色对应的权限列表 }
}

const tableData: DataType[] = [
    { key: 1, user: 'jack', roleName: "小明", number: "155555", role: "老师", state: '正常' },
    { key: 2, user: 'maek', roleName: "小张", number: "155555", role: "学生", state: '正常' },
    { key: 3, user: 'kkk', roleName: "小吖", number: "15555", role: "学生", state: '已禁用'},


]

let newLIST=ref(tableData)

const del=(id:any)=>{
newLIST.value=newLIST.value.filter(item=>item.key!=id)
// console.log(newLIST.value);
}



const handleClose = (done: () => void) => {

    dialogVisible.value = false
}
const handleClose2 = (done: () => void) => {

dialogVisible2.value = false
}

</script>

<style lang="less" scoped>
.role-box {
    padding: 30px;
    box-sizing: border-box;
}

.search-role-box {
    display: flex;
    height: 40px;
    box-sizing: border-box;

    .search-input {
        width: 225px;
        height: 40px;
        box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #d7d7d7;
        margin-right: 20px;

        .inp {
            width: 100%;
            height: 40px;
            outline: none;

        }

    }

    button {
        width: 80px;
        height: 40px;
        box-sizing: border-box;
        background-color: #1579fe;
        margin-right: 10px;
        border-radius: 6px;
        color: #fff;
    }
}

.add-btn {
    width: 80px;
    height: 40px;
    box-sizing: border-box;

    margin-top: 30px;

    button {
        width: 80px;
        height: 40px;
        background-color: #1579fe;
        color: #fff;
        border-radius: 6px;
    }
}

.permissions {
    display: flex;
}

/deep/.el-table tr {
    height: 70px;
}

.table-box {
    margin-top: 10px;
}

.del-btn {
    width: 60px;
    height: 30px;
    color: #ffcfd8;
    border: 1px dashed #0a7fff;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 5px;
    margin: 0 10px;
}

.chg-btn {
    width: 60px;
    height: 30px;
    color: #fff;
    border: 1px solid #3672d0;
    background-color: #197dff;
    border-radius: 4px;

}

.open {
    width: 60px;
    height: 30px;
    color: #fff;
    border: 1px solid #3672d0;
    background-color: #197dff;
    border-radius: 4px;
}

.reset {
    width: 80px;
    height: 30px;
    color: #fff;
    border: 1px solid #3672d0;
    background-color: #197dff;
    border-radius: 4px;
    margin-left: 10px;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
